import React, { Component } from 'react'
import './index.scss'
import shopMayun from './shopMayun.json'
import $ from 'jquery'
export default class Shop extends Component {
  constructor() {
    super()
    this.state = {
      num: 0,
      num2: 0,
      num3: 0,
      num4: 0,
      mayun: shopMayun.data,
    }
  }

  showModal = () => {
    $('.picture').show().animate({ top: '12%' })
    $('.shop').addClass('current')
    var top = $(document).scrollTop();
    $(document).on('scroll.unable', function (e) {
      $(document).scrollTop(top);
    })
  }

  close = () => {
    $('.picture').hide().css("top", "-100%")
    $('.shop').removeClass('current')
    $(document).unbind("scroll.unable");
  }

  render() {
    return (
      <div className='shopBox'>
        <div className='shop'>
          <div className='index-header'>
            <div className='container'>
              <div className='index-header-topbar'>
                <div className='index-header-topbar-left'>
                  <img className='logo' src='https://shadow.elemecdn.com/lib/kd-resource@0.1.0/new-logo.png' alt='' />
                  <span>商户中心</span>
                </div>

                <div className='index-header-topbar-right'>
                  <span>在线客服</span>
                  <span>客户端下载</span>
                </div>
              </div>

              <h1 className='title'>加入饿了么和饿了么星选外卖双平台 翻倍赚大钱</h1>

              <ul className='index-header-numbers'>
                <li>
                  <p>
                    <span>{this.state.num}</span>
                    <span>小时</span>
                  </p>
                  <span>极速开店</span>
                </li>
                <li>
                  <p>
                    <span>{this.state.num2}</span>
                    <span>万</span>
                  </p>
                  <span>优质商家</span>
                </li>
                <li>
                  <p>
                    <span>{this.state.num3}</span>
                    <span>城市</span>
                  </p>
                  <span>全国覆盖</span>
                </li>
                <li>
                  <p>
                    <span>{this.state.num4}</span>
                    <span>亿</span>
                  </p>
                  <span>累计用户</span>
                </li>
              </ul>

              <div className='index-buttons'>
                <p type="primary" className='btn-primary'>
                  <span className="inner">我要开店</span>
                </p>
                <p>
                  <span>查看开店记录</span>
                </p>
              </div>
            </div>
          </div>

          <div className='kd-steps-wrap'>
            <span className='kd-title'>开店流程</span>
            <ul className='kd-steps'>
              <li className='item-wrap'>
                <img alt='' src='https://shadow.elemecdn.com/lib/kd-resource@0.1.0/steps1.png' />
                <span>提交申请</span>
              </li>

              <li className='item-wrap'>
                <img alt='' src='https://shadow.elemecdn.com/lib/kd-resource@0.1.0/steps2.png' />
                <span>审核签约</span>
              </li>

              <li className='item-wrap'>
                <img alt='' src='https://shadow.elemecdn.com/lib/kd-resource@0.1.0/steps3.png' />
                <span>录入菜单</span>
              </li>

              <li className='item-wrap'>
                <img alt='' src='https://shadow.elemecdn.com/lib/kd-resource@0.1.0/steps4.png' />
                <span>门店上线</span>
              </li>
            </ul>
          </div>

          <div className='kd-qa-wrap'>
            <span className='qa-title'>常见问题</span>
            <ul className='kd-qa'>
              <li className='item-wrap'>
                <span className="title">1.饿了么上开店是如何收费的？</span>
                <span className="content">饿了么上开店本身不收取任何费用。 产⽣订单后会收取平台服务费，根据不同的地区、配送方案，大致如下:</span>
                <span className="other-content">· ⻔店⾃行配送：每笔订单金额的 5%~8%;</span>
                <span className="other-content">· 饿了么配送：每笔订单金额的 15%~25%;</span>
                <span className="other-content">申请提交后，会有市场经理与您详细沟通。</span>
              </li>

              <li className="item-wrap" >
                <span className="title">2.申请开店需要哪些材料？</span>
                <span className="content">门脸照片、店内照片、门店logo、身份证照片、营业执照、餐饮服务许可证（或其他食品流通许可证等有效证件）。</span>
                <span className="btnTxt" onClick={this.showModal}>查看图片示例</span>
              </li>

              <li className="item-wrap">
                <span className="title">3.想找个市场经理帮我开店，如何联系？</span>
                <span className="content">您需先点击“我要开店”按钮申请开店，然后，将自动为您联系一位市场经理。</span>
              </li>

              <li className="item-wrap">
                <span className="title">4.开店审核需要多久？</span>
                <span className="content" >提交申请后，1~3个工作日内将会有市场经理线下审核店铺信息，如超时未处理，您可直接联系市场经理。</span>
              </li>

              <li className="item-wrap">
                <span className="title">5.提交申请后，如何查询审核结果？</span>
                <span className="content">您可通过“饿了么商家版”App 查看当前审核状态。</span>
              </li>

              <li className="item-wrap">
                <span className="title">6.店铺之前无效了，可以重新上线吗？ </span>
                <span className="content">可以，实体店双证齐全可直接点击“我要开店”按钮申请开店。</span>
              </li>

              <li className="item-wrap">
                <span className="title">7.无实体店或单证可以上线吗？</span>
                <span className="content">不可以，网上开店必须有线下实体门店，并且需要准备好营业执照与餐饮服务许可证（或其他类许可证等)。</span>
              </li>
            </ul>
          </div>

          <div className='index-brands'>
            <div className='container'>
              <p className='ruZhu'>他们已入驻，你呢？</p>
              <img alt='' src={require('../../assets/Shopimg/shops.png')} />
            </div>
          </div>

          <div className="index-people">
            <div className="container">
              <ul className="index-people-list">
                {
                  this.state.mayun.map((data, index) => {
                    return <li key={index}>
                      <div className="index-people-img">
                        <img alt='' src={data.backgroundImage} />
                      </div>
                      <div className="index-people-about">
                        <p className="name">{data.name}</p>
                        <p className="name-en">{data.EnglishName}</p>
                        <p className="identity">{data.identity}</p>
                        <div className="quote">
                          <p>{data.quote}</p>
                        </div>
                      </div>
                    </li>
                  })
                }

                {/* <li>
                <div className="index-people-img man2"></div>
                <div className="index-people-about">
                  <p className="name">张旭豪</p>
                  <p className="name-en">zhang xu hao</p>
                  <p className="identity">饿了么创始人</p>
                  <div className="quote">
                    <p>以前做营销靠经验，现在饿了么为老板定制方案，新用户拉新、老用户促活。未来，甚至你还没开店，都能用我们的数据去看哪个区域开什么店好。</p>
                  </div>
                </div>
              </li>

              <li>
                <div className="index-people-img man3"></div>
                <div className="index-people-about">
                  <p className="name">尤泽明</p>
                  <p className="name-en">you ze ming</p>
                  <p className="identity">五四拌肉饭与脆皮鸡</p>
                  <div className="quote">
                    <p>因为一次无意看到了饿了么的传单，辞掉了工作做起了外卖。现在每天净赚1500多，感谢饿了么，让我的第一次创业就这么成功！</p>
                  </div>
                </div>
              </li> */}
              </ul>
            </div>
          </div>

          <div className='bottom-links'>
            <img alt='' src={require('../../assets/Shopimg/footer.png')} />
          </div>

        </div>

        <div className='picture'>
          <p className='pictureTitle'>
            <span>申请开店前，请准备以下资料</span>
            <span className='close' onClick={this.close}>X</span>
          </p>
          <img alt='' src={require('../../assets/Shopimg/picture.png')} />
        </div>
      </div>
    )
  }

  componentDidMount() {
    this.addNumber()
  }

  addNumber = () => {
    var curNum = 0;
    var shopNum = 0;
    var cityNum = 0;
    var userNum = 0;
    var timer = setInterval(() => {
      if (curNum < 24) {
        curNum = curNum + 1
        this.setState({
          num: curNum
        })
      }

      if (shopNum < 340) {
        shopNum = shopNum + 15
        this.setState({
          num2: shopNum - 5
        })
      }

      if (cityNum < 2000) {
        cityNum = cityNum + 85
        this.setState({
          num3: cityNum - 40
        })
      }

      if (userNum < 26) {
        userNum = userNum + 1
        this.setState({
          num4: userNum / 10
        })
      } else {
        clearInterval(timer)
      }
    }, 50)
  }

  // autoplayMayun = () => {
  //   setInterval(() => {
  //     this.state.mayun.push(this.state.mayun.shift())
  //     this.setState({
  //       mayun: this.state.mayun
  //     })
  //   }, 5000)
  // ,
  //   {
  //     "name":"徐秀风",
  //     "EnglishName":"xu xiu feng",
  //     "identity":"常林路水果店",
  //     "quote":"下岗后我盘了个水果摊，但年纪大了手机用不来，后来饿了么帮我开了网店，还帮我解决各种问题。现在，我是饿了么明星商家，我只做饿了么！",
  //     "backgroundImage":"https//shadow.elemecdn.com/faas/napos-kaidian/static/img/man4.3eb920a.png"
  //   }
  // }
}
